<template>
    <div>
        <ly-dialog v-model="dialogVisible" :title="loadingTitle" width="70%" top="2%"  :before-close="handleClose" class="form-dialog">
            <el-form :inline="false" :model="formData" :rules="rules" ref="rulesForm" label-position="right" label-width="auto" class="form-data">
                <div class="form-data-item">
                <div class="form-title">基础信息</div>
                    <el-form-item label="商品名称：" prop="name">
                        <el-input v-model.trim="formData.name" placeholder="请输入商品名称" style="width: 300px"></el-input>
                    </el-form-item>
                    <div style="display: flex;align-items: center;">
                        <el-form-item label="商品分类：" prop="category" >
                            <el-select v-model="formData.category" placeholder="请选择分类" clearable filterable  style="width: 300px" aria-disabled="true">
                                <el-option v-for="item in category_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <el-form-item label="品牌：" prop="brand">
                        <el-select v-model="formData.brand" placeholder="请选择品牌" clearable filterable  style="width: 300px">
                            <el-option v-for="item in brand_list" :key="item.id":label="item.name" :value="item.id"></el-option>
                        </el-select>
                        </el-form-item>
                    </div>
                    <el-form-item label="商品排序：" prop="sort">
                        <el-input-number v-model="formData.sort"  :min="0" :max="9999"></el-input-number>
                    </el-form-item>
                </div>
                <div class="form-data-item">
                    <div class="form-title">规格配置</div>
                        <!-- 单规格-->
                        <div v-for="(item,index) in formData.specs">
                            <el-form-item :label="formData.specs[index].spec" prop="price" class="is-required">
                                <el-input-number v-model="formData.specs[index].option" :precision="2" style="width: 300px" placeholder="请输入商品价格"></el-input-number>
                            </el-form-item>
                         </div>
                        <!-- 多规格-->
                    </div>
            </el-form>
            <template #footer>
                <el-button @click="handleClose" :loading="loadingSave">取消</el-button>
                <el-button type="primary" @click="submitData" :loading="loadingSave">确定</el-button>
            </template>
        </ly-dialog>
    </div>
</template>

<script>
    //import { mallGoodsspuEdit} from "@/api/api";
    import LyDialog from "@/components/dialog/dialog";
    import {deepClone} from "@/utils/util"
    export default {
        emits: ['refreshData'],
        name: "addModuleGoodsManage",
        components: {
            LyDialog
        },
        data() {
            return {
                dialogVisible:false,
                loadingSave:false,
                loadingTitle:'',
                formData:{
                    name: '',
                    sub_name: '',
                    category: '',
                    brand: '',
                    price:0,
                    stock: 0,
                    sort:0,
                    specs:[],//sku/规格
                },
                rules:{
                    category: [
                        {required: true, message: '请选择商品分类',trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入商品名称',trigger: 'blur'}
                    ],

                },
                category_list:[],
                brand_list:[]
            }
        },
        mounted() {
            window.addEventListener("focusin", this.onFocusIn,true);
        },
        unmounted() {
            window.removeEventListener("focusin", this.onFocusIn);
        },
        methods:{
            onFocusIn(e){
                e.stopImmediatePropagation()//阻止当前和后面的一系列事件
            },
            addModuleFn(item,flag,categoryList,brandList) {
                this.loadingTitle=flag
                this.dialogVisible=true
                this.category_list = categoryList
                this.brand_list = brandList
                if(item){this.formData = deepClone(item)}
            },
            //规格表格展示-删除
            /*
            * 规格方法自定义结束
            * */
            handleClose() {
                this.dialogVisible=false
                this.loadingSave=false
                this.formData={
                    name: '',
                    sub_name: '',
                    category: '',
                    price:0,
                    stock: 0,
                    spec_type:0,
                    sort:0,
                },
                this.$emit('refreshData')
            },
            submitData() {
                this.$refs['rulesForm'].validate(obj=>{
                    if(obj) {
                        let param = {...this.formData}
                        //轮播图结束
                        param.sub_name = param.name
                        this.loadingSave=true
                        if(this.formData.id){
                            //单规格价格和库存的同步
                            if (this.formData.spec_type === 0) {
                                if(this.formData.price<=0){
                                    this.$message.warning("商品规格价格要大于0")
                                    this.loadingSave=false
                                    return
                                }
                                if(this.formData.stock<0){
                                    this.$message.warning("商品规格库存要大于等于0")
                                    this.loadingSave=false
                                    return
                                }
                                param.skus[0].price = param.price
                                param.skus[0].stock = param.stock
                            }
                        }
                        this.loadingSave=false
                    }
                })
            },
        },
    }
</script>
<style lang="scss" scoped>
    /*::v-deep(.el-dialog__body) {*/
    /*    padding: 0 30px !important;*/
    /*}*/
    .add-specs-inner{
        padding: 10px;
        background: #fffcfc;
        border: 1px solid #e0e0e0;
        .tips{
            font-size: 12px;
            color: #999999;
        }
        .add-specs-item{
            display: flex;
            align-items: center;
            .name{
                width: 60px;
                font-size: 12px;
            }
        }
    }
    .uploadImg{
        display: flex;
        line-height: 36px;
        font-size: 14px;
        .photoNum{
            font-weight: bold;
            em{
                font-style: normal;
                color: #ff0000;
            }
        }
        .input-fileup{
            width: 120px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            overflow: hidden;
            position: relative;
            background: #409EFF;
            color: #ffffff;
            border: 1px solid #dcdfe6;
            text-decoration: none;
            display: block;
            margin: 0 15px 0 5px;
            border-radius: 3px;
            /*color: #666666;*/
            input{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                cursor: pointer;
            }
        }
    }

    .pickAlbumPreListO{
        width: 100%;
        background: #f1f1f1;
        /*height: 224px;*/
        .tipsCon{
            text-align: center;
            color: #999999;
        }
    }
    .pickAlbumPreList {
        display: table;
        margin: 0;
        padding: 0;
        /*height: 174px;*/
        li {
            width: 110px;
            padding: 10px;
            box-sizing: border-box;
            /*height: 140px;*/
            display: block;
            float: left;
            margin: 5px;
            position: relative;
            font-size: 12px;
            text-align: center;
            img,.el-image {
                display: block;
                width: 90px;
                height: 90px;
                border: 1px solid #d6d6d6;
            }
            i.el-icon-close{
                display: none;
                position: absolute;
                right: 0;
                top: 0;
                background: #409eff;
                color: #ffffff;
                font-size: 20px;
                cursor: pointer;
            }
            .btnchang{
                display: flex;
                margin-top: 10px;
                align-items: center;
                align-content: center;
            }
            .sizeImg{
                color: #ff0000;
            }
            button{
                width: 40px;
                margin: 0 auto;
                padding: 0;
                height: 28px;
            }
            &:hover i.el-icon-close{
                display: block;
            }
            i.el-icon-picture{
                width: 90px;
                height: 90px;
                display: block;
                text-align: center;
                line-height: 90px;
                border: 1px solid #e1e1e1;
                font-size: 20px;
                border-radius: 4px;
                background: #fff;
            }
        }
    }
    // 规格样式
    .tag-item{
        display: flex;
        flex-direction: row;
        column-gap: 10px;
        background: #f1f1f1;
        padding: 8px;
        margin-bottom: 10px;
        .el-icon-s-grid{
            color: #e6ddd8;
            font-size: 32px;
            cursor: move;
        }
        .input-item{
            flex: 1;
            display: flex;
            flex-direction: column;
            column-gap: 10px;
            .el-icon-error{
                font-size: 14px;
                color: #000000;
                cursor: pointer;
            }
            .spec-item{
                flex: 1;
                display: flex;
                flex-direction: row;
                align-items: center;
                column-gap: 10px;

            }
        }
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 128px;
      height: 128px;
      line-height: 128px;
      text-align: center;
    }
    .avatar {
      width: 128px;
      height: 128px;
      display: block;
    }
    .form-data {
        height: calc(100vh - 200px);
        overflow-y: auto;
        border: 1px solid  #b3d8ff;
        .form-title{
            color: #409eff;
            background: #ecf5ff;
            padding: 10px;
            margin-bottom: 20px;
        }
    }
</style>
